<template>
  <div class="tab-control">
    <tab-control :titles="['衣服','鞋子','裤子']"
    v-on:clickItem="clickItem"></tab-control>
    <!--<tab-control :titles="['流行','新款','精选']"></tab-control>-->
    <h2>{{pageContents[currentIndex]}}</h2>
    <hr>

    <tab-control :titles="['衣服','鞋子','裤子']"
    v-on:clickItem="clickItem">
    <!--<button>按钮</button>-->
    <!--<button>{{ item }}</button>--> <!--这里使用item来获取子组件传过来的参数,是错误的,作用域不一样-->
    <template v-slot:default="props"> <!--这里的props是自定义名称, default是默认名称-->
      <button>{{ props.item }}</button>
    </template>
    </tab-control>

    <tab-control :titles="['衣服','鞋子','裤子']"
    v-on:clickItem="clickItem">
    <template #default="props">
      <a href="https://www.baidu.com">{{ props.abc }}</a>
    </template>
    </tab-control>

    <tab-control :titles="['衣服','鞋子','裤子']"
    v-on:clickItem="clickItem" v-slot="props">
      <a href="https://www.baidu.com">{{ props.abc }}</a>
    </tab-control>
  </div>

</template>

<script>
  import TabControl from './TabControl.vue'
  export default {
    components: {
      TabControl
    },
    data() {
      return {
        pageContents: ['衣服列表','鞋子列表','裤子列表'],
        currentIndex: 0
      }
    },
    methods: {
      clickItem(index) {
        this.currentIndex = index
        console.log("子组件传递的index是" + index)
      }
    }
  }
</script>

<style scoped>
</style>